<template>
    <div class="container">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="userName" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="passWord" prop="pass">
                <el-input v-model="ruleForm.pass" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    登录
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useStore } from "vuex";

const sto = useStore()
const formSize = ref('default')
const ruleFormRef = ref()

const ruleForm = reactive({
    name: '',
    pass: '',
})

const rules = reactive({
    name: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 2, max: 8, message: '用户名长度 2 to 8', trigger: 'blur' },
    ],
    pass: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 3, max: 15, message: '密码长度 3 to 15', trigger: 'blur' },
    ],
})


const submitForm = async (formEl) => {
    console.log(formEl, 'formEl')
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!', ruleForm)

            sto.dispatch('loginto', { name: ruleForm.name, pass: ruleForm.pass })

        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}


</script>

<style lang="scss" scoped></style>
